<template>

  <div>
    <div>
      <!-- 面包屑导航区域 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>编辑内容</el-breadcrumb-item>
        <el-breadcrumb-item>演员列表</el-breadcrumb-item>
        <el-breadcrumb-item>添加演员</el-breadcrumb-item>
        <p><br></p>
      </el-breadcrumb>
    </div>
    <div style="text-align: left">

      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" title="编辑电影">

        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name" style="width: 593px"></el-input>
        </el-form-item>
        <el-form-item label="出生年月日" prop="time_length">
          <el-col :span="11">
            <el-date-picker v-model="ruleForm.birthday" placeholder="选择年月日" style="width: 100%;"
                            type="date"></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="性别" prop="sex" required>
          <el-col :span="12">
            <template>
              <el-radio v-model="sex" label="男">男</el-radio>
              <el-radio v-model="sex" label="女">女</el-radio>
            </template>
          </el-col>
        </el-form-item>

        <el-form-item label="区域" prop="regionsStr">
          <el-checkbox-group v-model="ruleForm.regionsStr">

            <el-checkbox v-for="region in allRegionList" :id="region.id" :label="region.id" name="categories">
              {{ region.name }}
            </el-checkbox>

          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="演员简介" prop="description">
          <el-col :span="11">
            <el-input v-model="ruleForm.description" rows="5" si type="textarea"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="照片" prop="pic">
          <el-upload
              ref="upload"
              :auto-upload="false"
              :file-list="fileList"
              :limit="1"
              :multiple="false"
              :on-change="fileChange"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              list-type="picture-card"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img
                  :src="file.url"
                  alt="" class="el-upload-list__item-thumbnail"
              >
              <span class="el-upload-list__item-actions">
        <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>

        <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img :src="dialogImageUrl" alt="" width="100%">
          </el-dialog>
        </el-form-item>
        <el-form-item style="width: 600px; text-align: center">
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import th from "element-ui/src/locale/lang/th";

export default {
  name: "Actor",
  data() {
    return {
      disabled: false,
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [],
      allRegionList: [],// 用来存储所有的区域
      ruleForm: {
        sex: '男',
        name: '',
        birthday: '',
        description: '',
        regionsStr: [], // 用来存储在添加演员页面上选中的区域
        pic: '',
      },
      rules: {
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
          {min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur'}
        ],
        birthday: [
          {type: 'date', required: true, message: '请输入出生年月日', trigger: 'blur'}
        ],
        sex: [
          {required: true, message: '请选择性别', trigger: 'change'}
        ],
        regions: [
          {type: 'array', required: true, message: '请至少选择一个区域', trigger: 'change'}
        ],
        description: [
          {required: true, message: '请填写简介', trigger: 'blur'}
        ]

      }
    }
  },
  mounted() {
    this.$http.get("/api/actor/findAllRegion")
        .then(res => {
          //把区域列表赋值给 data中定义的 regionList,便于在页面上展示
          this.allRegionList = res.data
        }).catch(res => {
      console.log(res);
      this.$message.error("获取区域列表失败")
    })
  },
  methods: {
    handleRemove: function (file, fileList) {
      this.fileList = fileList;
    },
    fileChange: function (file, fileList) {
      this.fileList = fileList;
    },
    handlePictureCardPreview: function (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    cancel(){
      this.$router.push("/actorList");
    },
    saveActor() {
      let dataForm = new FormData;
      if (this.fileList.length > 0) {
        if (this.fileList[0].size >= 1048576) {
          this.$message.error("图片内存超过1MB")
          return false;
        }
        dataForm.append("file", this.fileList[0].raw)
      } else {
        dataForm.append("file", null)
      }
      dataForm.append("actor", JSON.stringify(this.ruleForm))
      this.$http.post("/api/actor/save", dataForm, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
          .then(res => {
            this.$message.success("保存成功")
          })
          .catch(res => {
            this.$message.error("保存演员信息失败")
            return false;
          })
      return true;
    },
    submitForm(formName) {
      let self = this

      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.saveActor()){
            return ;
          }
          self.dialogVisible = false;
          // 更新成功后,跳转到演员列表页面
          this.$router.push("/actorList")

        } else {
          this.$message.error("保存失败,请注意格式")
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>
#el-input {
  width: 400px;
}

.template_title {
  line-height: 40px;
  width: 500px;
  text-align: center;
  height: 60px;
  margin-top: 0px;
  font-size: 24px;
  color: #226655;
}
</style>